<template>
  <div>
  <Header></Header>
  <Nav></Nav>
  <span class="headertitle">研究阶段2</span>
  <el-tag type="warning" class="box-card1">温馨提示:在研究阶段一至少上传两次活动材料，最多上传5次活动材料，活动材料上传完毕后，清点击操作列下对应课题的“提交”按钮，进入下一阶段！</el-tag>
  <el-card class="box-card">
    <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
              >
              <el-table-column type="selection" width="50"></el-table-column>
           <el-table-column prop="num1" label="课题编号" width="140" ></el-table-column>
           <el-table-column prop="num2" label="课题名称" width="300" ></el-table-column>
           <el-table-column prop="num3" label="活动次数" width="150"></el-table-column>
           <el-table-column prop="num4" label="上传部门" width="150"></el-table-column>
           <el-table-column prop="num5" label="上传用户" width="120"></el-table-column>
           <el-table-column prop="num6" label="上传时间"></el-table-column>
           <el-table-column label="操作"><el-link type="primary" @click="dialogVisible = true">请上传</el-link></el-table-column>
           <el-table-column label="操作">
            <el-link type="primary" @click="dialogVisible =true">上传材料</el-link>
            <el-link type="primary" style="margin-left: 10px;">查看材料</el-link>
            <el-link type="primary"  style="margin-left: 10px;">提交</el-link>
          </el-table-column>
          </el-table>
  </el-card>
  <!-- 上传材料 -->
  <el-dialog
    title="活动材料"
    :visible.sync="dialogVisible"
    width="40%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="课题名称">
        <el-input v-model="form.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="活动标题">
        <el-input v-model="form.name2" placeholder="请输入活动标题"></el-input>
      </el-form-item>
      <el-form-item label="活动材料">
        <el-upload
          action="" 
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible2">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
  data(){
      return {
        tableData:[{
          num1:'20221217001',
          num2:'《古猿人进化史》',
          num3:'0',
          num4:'暂无',
          num5:'张三',
          num6:'2022-12-24 15:04:00',
        },{
          num1:'20221217001',
          num2:'《古猿人进化史》',
          num3:'0',
          num4:'暂无',
          num5:'张三',
          num6:'2022-12-24 15:04:00',
        }],
        dialogVisible:false,
        form:{
          name:'广西高校教师信息技术应用能力监测与整体提升研究',
          name2:'',
        },
        dialogImageUrl: '',
      dialogVisible2: false
      }
  },
  components:{
  Header,
  Nav
},
methods:{
  // 文件列表移除文件时的钩子
  handleRemove(file, fileList) {
    console.log(file, fileList);
  },
  // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
}
}
</script>

<style lang="less" scoped>
  .box-card{
      width: 91%;
      float: right;
      margin-right: 1%;
      margin-top: -40%;
  }
  .box-card1{
      width: 91%;
      float: right;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      margin-right: 1%;
      margin-top: -44%;
  }
body{
position: relative;
}
.headertitle{
position: absolute;
top: 0;
z-index: 999;
margin-top: 20px;
margin-left: 180px;
font-size: 18px;
}
</style>